<template>
	<transition name="scale">
		<div class="qrcode" v-show="qrcodeShow">
			<div class="qrcode-wrap">
				<div class="qrcode-inner-wrap" id="app-download-qrcode" >
				</div>
			</div>
			<div v-show="showTips" class="qrcode-tips">请使用微信扫描二维码登录</div>
		</div>
	</transition>
</template>
<script>
	import qrcode from '../../assets/js/jquery.qrcode.min'
	export default{
		name:"qrcode",
		props:{
			src:{
				type:String,
				default:require('../../assets/images/qrcode.png')
			},
			showTips:{
				type:Boolean,
				default:false
			},
			qrcodeShow:{
				type:Boolean,
				default:false
			}
		},
		mounted(){
	        $("#app-download-qrcode").qrcode({
	        	width:162,
	        	height:162,
	        	text:"https://vend.1234tv.com/app/download"
	        })
		}
	}
</script>
<style scoped>
	.scale-enter-active, .scale-leave-active {transition: transform .1s;}
	.scale-enter, .scale-leave-to {transform: scale(0);}
	.qrcode{position: absolute;}
	.qrcode-wrap{position:relative;background-color: #3597dc;padding: 10px;}
	.qrcode-wrap:before{content: '';position: absolute;width: 0;height: 0;top:-20px;left:0;right:0;margin:auto;border-width: 0 15px 30px;border-style: solid;border-color:transparent transparent #3597dc;}
	.qrcode-inner-wrap{position:relative;padding: 10px;font-size:0;background-color: #fff;width: 162px;height: 162px;overflow: hidden;}
	.qrcode-inner-wrap:before{content: '';position: absolute;top:-16px;left:0;right:0;width: 0;height: 0;margin:auto;border-width: 0 10px 20px;border-style: solid;border-color:transparent transparent #fff;}
	.qrcode-inner-wrap img{vertical-align: top;}
	.qrcode-tips{margin-top:8px;padding:0 5px;line-height:40px;text-align:center;background-color: rgb(58,74,87);color: white;border-radius: 6px;font-size: 14px;letter-spacing: normal;}
</style>